<template>
	<!-- 我要报名 -->
	<view class="application-container">
		<view class="title" v-if="flag">{{detail.name}}</view>
		<!-- 表单区 -->
		<view class="wrap" v-if="flag">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="application" labelWidth="200rpx" :labelStyle="{fontSize: '28rpx',
		fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',
		fontWeight: 500,
		color: '#333333',
		lineHeight: '28rpx',
		letterSpacing: '1px'}">
				<u-form-item label="活动开始时间" borderBottom ref="item1">
					<view class="txt">{{detail.start_at}}</view>
				</u-form-item>
				<u-form-item label="活动结束时间" borderBottom ref="item1">
					<view class="txt">{{detail.end_at}}</view>
				</u-form-item>
				<u-form-item label="活动地点" borderBottom ref="item1">
					<view class="txt">-</view>
				</u-form-item>
				<u-form-item label="活动费用" borderBottom ref="item1">
					<view class="txt">人民币{{detail.price}}元</view>
				</u-form-item>

				<!-- 分割线 -->
				<view style="width: 100%; height: 20rpx; background-color: #f6f6f6; margin-top: 40rpx;"></view>

				<u-form-item label="姓名" prop="name" borderBottom ref="item1">
					<view class="txt">{{model.name}}</view>
				</u-form-item>
				<u-form-item label="手机号码" prop="mobile" borderBottom ref="item1">
					<u--input v-model="model.mobile" border="none" placeholder="请输入手机号码"></u--input>
				</u-form-item>
			</u--form>
		</view>

		<!-- 底部按钮 -->
		<BottomButton @setHandleBtn="getHandleBtn" v-if="flag">
			<template>
				<view>提交</view>
			</template>
		</BottomButton>

		<!-- 报名成功 -->
		<view class="img" v-else>
			<image src="/static/img/activityList/success.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import BottomButton from '@/componets/BottomButton/BottomButton.vue'
	export default {
		data() {
			return {
				// id
				id: '',
				// 展示开关
				flag: true,
				// 活动信息
				detail: {},
				// 实名认证信息
				model: {
					name: uni.getStorageSync('user_data').name,
					mobile: uni.getStorageSync('user_data').mobile
				},
				// 实名认证规则
				rules: {
					'name': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请正确填写姓名'
					}],
					'mobile': [{
							type: 'string',
							required: true,
							message: '请填写手机号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请正确填写手机号'
						},
					],
				},
			}
		},
		methods: {

			/**
			 * 提交活动
			 */
			getHandleBtn() {
				this.$refs.application.validate().then(res => {
					this.$request.post({
						url: '/api/activity/signUp',
						data: {
							activity_id: this.id,
							applicant_name: this.model.name,
							applicant_phone: this.model.mobile
						},
						success: res => {
							if (res.code != 200) return uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							this.flag = false
						}
					})
				})

			}
		},
		onLoad(options) {
			if (!options.detail || !options.id) return uni.navigateBack()
			this.detail = JSON.parse(options.detail)
			this.id = options.id
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.application.setRules(this.rules)
		},
		components: {
			BottomButton
		}
	}
</script>

<style lang="less" scoped>
	.application-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		overflow: hidden;

		>.img {
			width: 460rpx;
			margin: 346rpx auto 0;

			>image {
				width: 100%;
			}
		}

		.title {
			width: 100%;
			text-align: center;
			font-size: 40rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			line-height: 58rpx;
			margin-top: 40rpx;
		}

		.wrap {
			width: 100%;
			box-sizing: border-box;
			margin-top: 94rpx;

			/deep/.u-form-item {
				width: calc(100% - 80rpx);
				margin: 0 40rpx;
			}

			.place {
				color: #c0c4cc;
				font-size: 30rpx;
				line-height: 52rpx;
			}

			.txt {
				color: #303133;
				font-size: 30rpx;
				line-height: 52rpx;
			}
		}
	}
</style>